<template>
  <section>
    <basic-drawer
      :visible="visible"
      title="分组管理"
      ok-text="完成配置"
      @cancel="handleCancel"
      @open="run"
      @close="handleClose">
      <section class="flex items-center justify-between">
        <a-button type="primary" @click="openGroup">
          <i-icons-btn-add />添加分组</a-button
        >
        <a-button class="w-[30px]! h-[30px]! shrink-0" @click="run()">
          <template #icon>
            <icon-refresh size="16" :spin="loading" />
          </template>
        </a-button>
      </section>
      <a-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        class="mb-8 mt-6"
        :pagination="false">
        <template #action="{ record }">
          <a-link :hoverable="false" @click="openGroup(record)">编辑</a-link>
          <a-link
            :hoverable="false"
            status="danger"
            @click="handleDelete(record)"
            >删除</a-link
          >
        </template>
      </a-table>
      <section class="flex justify-end">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          show-total
          show-page-size
          :total="pagination.total || 0"
          :page-size-options="[15, 30, 45, 50, 100]"
          @change="(v) => handlePaginationChange(v, pagination.pageSize)"
          @page-size-change="(v) => handlePaginationChange(1, v)" />
      </section>
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
      </template>
    </basic-drawer>
    <add-group-dialog
      v-model:visible="groupVisible"
      :record="groupData"
      @refresh="handleRefresh" />
  </section>
</template>

<script setup lang="ts">
import {
  deleteApiSiteSiteGroupApi,
  getApiSiteSiteGroupListApi
} from '@/apis/modules/site/siteGroup'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { IconRefresh } from '@arco-design/web-vue/es/icon'
import AddGroupDialog from './AddGroupDialog.vue'
interface IProps {
  visible: boolean
}
withDefaults(defineProps<IProps>(), {
  visible: false
})
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'refresh'): void
}

const emit = defineEmits<IEmit>()
const { visible: groupVisible, open: openGroup, data: groupData } = usePopup()
const params = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'created_at'
})
const {
  data: tableData,
  loading,
  run,
  pagination
} = useListRequest(getApiSiteSiteGroupListApi, {
  params: params,
  immediate: false
})
const columns = computed(() =>
  buildColumns([
    {
      title: '分组名称',
      dataIndex: 'name',
      minWidth: 213
    },
    {
      title: '站点数',
      dataIndex: 'site_count',
      minWidth: 213,
      slotName: 'site_count'
    },
    {
      title: '添加时间',
      dataIndex: 'created_at',
      minWidth: 213,
      format: 'date-time',
      sortable: {
        sortDirections: ['ascend', 'descend']
      }
    },
    {
      title: '操作',
      slotName: 'action',
      width: 120,
      cellClass: 'actions-cell',
      fixed: 'right'
    }
  ])
)
const handlePaginationChange = (current: number, limit: number) => {
  pagination.value.current = current
  pagination.value.pageSize = limit
  run()
}
const handleRefresh = () => {
  run()
}
const handleDelete = (row: any) => {
  CloudModal.error(
    {
      content: `确认删除分组 “${row?.name}” ？`,
      okText: '删除'
    },
    async () => {
      await deleteApiSiteSiteGroupApi({ id: row?.id })
      ToastUtils.success('操作成功')
      run()
    }
  )
}
// 弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('refresh')
}
// 弹窗取消
const handleCancel = () => emit('update:visible', false)
</script>
<style lang="less" scoped></style>
